<template>
  <div class="configuration-situation">
    <div class="left">
      <div class="con-title">
        <span>配置情况</span>
      </div>
      <div class="l-value" />
      <el-row :gutter="20" class="things">
        <el-col v-for="item in configArr" :span="8" class="thing">
          <div class="t-title">{{ item.title }}</div>
          <div class="t-bottom">
            <el-row v-for="i in item.lists">
              <el-col :span="11" style="text-align: right">{{ i.label }} : </el-col>
              <el-col :span="12" class="little-word" :title="i.value">{{ i.value }}</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="right">
      <div class="con-title">
        <span class="title">防护软件部署情况</span>
        <i class="el-icon-refresh-right reset" @click="handleRefresh"> 刷新</i>
      </div>
      <div class="l-value">
        <!-- 最后更新时间：<span class="little-word">{{ updateTime }}</span> -->
      </div>
      <!-- <div class="overview">
        <span>缺失数量：<i>5</i></span>
        <span>应部署数量：<i>6</i></span>
      </div> -->
      <HkTable
        ref="tableRef"
        :loading="loading"
        :table-data="tableData"
        :table-columns="tableList"
        :show-index="true"
        :table-height="100"
        :show-pag="total > 0"
        :total="total"
        @changePage="getData"
      >
        <template #status="scope"> 正常 </template>
      </HkTable>
    </div>
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table'
import { software } from '@/api/dispose/userPortrait'
import { mapState } from 'vuex'
export default {
  components: {
    HkTable
  },
  data() {
    return {
      total: 0,
      updateTime: this.moment().format('lll'),
      loading: false,
      // 表格数据
      tableData: [],
      //  表格
      tableList: [
        { label: '防护产品名称', param: 'softwarename' },
        { label: '状态', param: 'status', type: 'slot' },
        // { label: "厂家", param: "analyseType" },
        // { label: "版本信息", param: "analyseType" },
        { label: '安装时间', param: 'createTime' }
      ],
      // 配置情况数组
      configArr: [],
      queryParams: {
        current: 1,
        size: 10
      }
    }
  },
  computed: {
    ...mapState({
      assetsObj: (state) => state.portrait.assetsObj
    })
  },
  mounted() {
    setTimeout(() => {
      this.getConfig()
      this.getData()
    }, 500)
  },
  methods: {
    handleRefresh() {
      this.loading = true
      return new Promise((resolve, reject) => {
        this.getData()
        resolve(this)
      }).then(() => {
        this.loading = false
        this.updateTime = this.moment().format('lll')
      })
    },
    getData(val) {
      if (!this.assetsObj) return
      const ip = this.assetsObj.equipmentIp
      software({ ip, ...this.queryParams, ...val }).then((res) => {
        this.tableData = res.list
        this.total = res.total
      })
    },
    getConfig() {
      const assetsObj = this.assetsObj
      if (!assetsObj) return
      this.configArr = [
        {
          title: '硬件配置',
          lists: [
            {
              label: 'CPU',
              value: assetsObj.equipmentCpu
            },
            {
              label: '内存容量',
              value: assetsObj.equipmentMemory
            },
            {
              label: '磁盘容量',
              value: assetsObj.equipmentDiskSpace
            },
            {
              label: '硬盘序列号',
              value: assetsObj.equipmentDiskSn
            },
            {
              label: '内置光驱类别',
              value: assetsObj.equipmentBuiltincdDriveDictLable
            },
            {
              label: '内置光驱状态',
              value: assetsObj.equipmentBuiltincdDrivestateDictLable
            }
          ]
        },
        {
          title: '品牌类型',
          lists: [
            {
              label: '厂商名称',
              value: assetsObj.equipmentManufacturer
            },
            {
              label: '品牌名称',
              value: assetsObj.equipmentBrand
            },
            {
              label: '产品型号',
              value: assetsObj.equipmentModel
            },
            {
              label: '设备序列号',
              value: assetsObj.equipmentSerialNumber
            }
          ]
        },
        {
          title: '操作系统',
          lists: [
            {
              label: '操作系统名称',
              value: assetsObj.equipmentOsDictLable
            },
            {
              label: '操作系统版本',
              value: assetsObj.equipmentVersion
            },
            {
              label: '系统安装时间',
              value: assetsObj.equipmentOsInstallDate
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__body-wrapper{
  overflow-y: auto !important;
}
.configuration-situation {
  width: 100%;
  max-height: 404px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;

  .left {
    width: 50%;
    background: #fff;
    padding: 20px;
    margin-right: 20px;
  }
  .right {
    width: 50%;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    &::v-deep {
      .targetTable {
        flex: 1;
        padding-bottom: 0;
        overflow: auto;
        .el-table {
          margin-top: 15px;
        }
      }
    }
  }
  .con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    .reset {
      font-size: 12px;
      color: #4b6eef;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .l-value {
    margin: 20px 0 0;
  }
  .little-word {
    margin-left: 6px;
    color: #8c8c8c;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .things {
    display: flex;
    margin-top: 20px;
    .thing {
      margin-right: 10px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      &:last-of-type {
        margin-right: 0;
      }
      .t-title {
        background: rgba(243, 245, 252, 0.5);
        padding: 10px 20px;
        color: #4b6eef;
        border-bottom: 1px solid #e5e5e5;
      }
      .t-bottom {
        flex: 1;
        padding: 20px 10px;
        .el-row {
          margin-bottom: 10px;
        }
      }
    }
  }
  .overview {
    margin-top: -15px;
    text-align: right;
    span {
      margin-left: 20px;
      display: inline-flex;
      align-items: center;
      i {
        font-style: normal;
        font-size: 24px;
        color: #fa541c;
        text-align: center;
        font-weight: 400;
      }
      &:nth-of-type(2) {
        i {
          color: #4b6eef;
        }
      }
    }
  }
}
::v-deep {
  .el-col {
    padding: 0 !important;
    margin: 5px 0;
  }
  .cell {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pagination-container {
    // height: 32px;
    // margin-top: -8px;
  }
}
</style>
